<template>
  <!-- 筛选器部分 -->
  <div class="filter">
    <span
      v-for="item in filters"
      :key="item.value"
      @click="$emit('change-filter', item.value)"
      class="filter-item"
      :class="{ active: selected === item.value }"
    >
      {{ item.label }}
    </span>
  </div>
</template>

<script>
export default {
  name: "todo_filter",
  props: ["selected"],
  setup() {
    const filters = [
      { label: "全部", value: "all"},
      { label: "已完成", value: "done"},
      { label: "未完成", value: "todo"}
    ];

    return { filters }
  }
}
</script>

<style scoped>
  /* 筛选器部分 */
  .filter {
    margin: 24px 2px;
    display: flex;
    color: #c0c2ce;
    font-size: 14px;
  }

  .filter .filter-item {
    margin-right: 14px;
    transition: 0.8s;
    cursor: pointer;
  }

  .filter .filter-item.active {
    color: #6b729c;
    transform: scale(1.2);
  }
</style>